<template>
  <div class="detail">
    <router-header title="报销申请"></router-header>
    <div class="export">
      <el-button
        slot="operator"
        type="primary"
        size="mini"
        class="button"
        @click="getpdf"
      >导出</el-button>
    </div>
    <el-radio-group v-model="tab" size="mini" style="margin-bottom: 15px">
      <el-radio-button label="表单信息"></el-radio-button>
      <el-radio-button label="流程图"></el-radio-button>
      <el-radio-button label="审批记录"></el-radio-button>
    </el-radio-group>
 
    <div v-show="tab === '表单信息'" id="drawerPdf">
      <el-form ref="info" :model="info" label-width="120px">
        <el-form-item label="报销部门：">{{ info.department }}</el-form-item>
        <el-form-item label="报销人：">{{ info.submitPeople }}</el-form-item>
        <div class="table-title">报销明细</div>
        <el-table
          size="mini"
          header-cell-class-name="table-header-gray"
          ref="table_add"
          :data="info.submitDetailList"
          border
          style="margin-bottom: 20px"
        >
          <el-table-column
            label="序号"
            header-align="center"
            align="center"
            type="index"
            width="55px"
          />
          <el-table-column label="费用类型" prop="createTime">
            <template slot-scope="{ row }">
              {{ row.expenseType | expenseTypeFilter }}
            </template>
          </el-table-column>
          <el-table-column label="费用明细" prop="createTime">
            <template slot-scope="{ row }">
              {{ row.submitSort }}
            </template>
          </el-table-column>
          <el-table-column label="报销金额(元)" prop="amount" />
          <el-table-column
            label="关联项目"
            prop="projectName"
          ></el-table-column>
          <el-table-column label="摘要" prop="abstracts" />
        </el-table>
        <el-form-item label="金额合计(元)：">{{ info.totalAmount }}</el-form-item>
        <el-form-item label="预支费用(元)：">{{ info.prepaid }}</el-form-item>
        <el-form-item label="退回金额(元)：">{{ info.refund }}</el-form-item>
        <el-form-item label="补领金额(元)：">{{ info.compensate }}</el-form-item>
        <el-form-item label="备注：">{{ info.memo }}</el-form-item>
        <el-form-item label="附件：">
          <!-- <el-image v-for="item in fileList"
            :preview-src-list="(fileList || []).map(imgItem => imgItem.url)"
            class="table-cell-image" :key="item.url" :src="item.url" fit="fill"></el-image> -->
          <template >
          <el-image v-for="item in  showImg"
            :preview-src-list="( showImg || []).map(imgItem => imgItem.url)"
            class="table-cell-image" :key="item.url1" :src="item.url" fit="fill" >
          </el-image>
          <br>
        </template>
        <a style="text-decoration: none;color:#000;"  v-for="item in  fileList" :key="item.url" href="javascript:void(0);" @click="downloadFile(item.url, item.filename)">
          {{item.filenames }}<br>
        </a>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="tab === '流程图'">
      <ProcessViewer
        :style="{ height: getMainContextHeight - 148 + 'px' }"
        :xml="entryXml"
        :finishedInfo="finishedInfo"
        :allCommentList="tableList"
      />
    </div>
    <div v-show="tab === '审批记录'">
      <el-table
        size="mini"
        header-cell-class-name="table-header-gray"
        ref="tableImpl"
        :data="tableList"
      >
        <el-table-column
          label="序号"
          header-align="center"
          align="center"
          type="index"
          width="55px"
        />
        <el-table-column label="流程环节" prop="taskName" />
        <el-table-column label="执行人" prop="createUsername"></el-table-column>
        <el-table-column label="操作" prop="approvalType">
          <!-- <template slot-scope="{ row }">
            {{ row.masterData.leaveBeginTime }}
          </template> -->
        </el-table-column>
        <el-table-column label="审批意见" prop="comment"></el-table-column>
        <el-table-column label="处理时间" width="180px" prop="createTime" />
      </el-table>
    </div>
  </div>
</template>
<script>
import { Reimbursement } from '@/api/approve.js';
import { mapGetters } from 'vuex';
import ProcessViewer from '@/views/workflow/components/ProcessViewer.vue';
import projectConfig from '@/core/config';
import { getToken } from '@/utils';
import htmlToPdf from '@/utils/download/htmlToPdf.js';
import { FlowOperationController } from '@/api/flowController.js';
export default {
  data () {
    return {
      info: {},
      tab: '表单信息',
      entryXml: null,
      tableList: [],
      finishedInfo: null,
      fileList: [],
      showImg: []
    };
  },
  filters: {
    expenseTypeFilter (type) {
      const data = {
        1: '差旅费',
        2: '交通费',
        3: '招待费',
        4: '行政办公',
        5: '市场费',
        6: '专家评审费',
        7: '汽车费用',
        8: '其它'
      };
      return data[type];
    }
  },
  components: {
    ProcessViewer
  },
  computed: {
    ...mapGetters(['getMainContextHeight'])
  },
  created () {
    if (this.$route.query.id) {
      this.getDetail();
    } else {
      this.$router.go(-1);
    }
    this.getRecords();
    this.getProcessBpmn();
    this.getViewHighlightFlowData();
  },
  methods: {
    // 表单信息
    getDetail () {
      Reimbursement.detail(this, {
        processInstanceId: this.$route.query.id
      }).then((res) => {
        // this.info = res.data;
        // let arr = [];
        // if (res.data.imgTu) {
        //   let token = getToken();
        //   arr = JSON.parse(res.data.imgTu);
        //   arr.forEach((item) => {
        //     item.url = `${projectConfig.baseUrl}admin/app/submit/download?id=${res.data.id}&fieldName=leaveFile&asImage=true&filename=${item.filename}&Authorization=${token}`;
        //   });
        // }
        // console.log('回显的数据', res.data)
        this.info = res.data;
        let arr = []
        if (res.data.imgTu) {
          let token = getToken()
          arr = JSON.parse(res.data.imgTu)
          // console.log('打印下arr', arr)
          this.showImg = arr.filter(item => {
            return item.filename.substr(item.filename.lastIndexOf('.')) === '.jpg' || item.filename.substr(item.filename.lastIndexOf('.')) === '.png'
          })
          // console.log('后缀', this.showImg)
          arr.forEach(item => {
            item.url = `${projectConfig.baseUrl}admin/app/submit/download?id=${res.data.id}&fieldName=imgTu&asImage=true&filename=${item.filename}&Authorization=${token}`
          });
        }
        this.fileList = arr;
        // console.log('打印fileList', this.fileList)
      });
    },
    // pdf导出
    getpdf () {
      htmlToPdf.downloadPDF(document.querySelector('#drawerPdf'), '报销申请报告');
    },
    // 审批记录
    getRecords () {
      console.log('----------', this.$route.query)
      FlowOperationController.listFlowTaskComment(this, {
        processInstanceId: this.$route.query.id
      }).then((res) => {
        this.tableList = res.data;
      });
    },
    // 流程图
    getProcessBpmn () {
      FlowOperationController.viewProcessBpmn(this, {
        processDefinitionId: this.$route.query.processDefinitionId
      }).then((res) => {
        this.entryXml = res.data;
      });
    },
    // 流程图高亮内容
    getViewHighlightFlowData () {
      FlowOperationController.viewHighlightFlowData(this, {
        processInstanceId: this.$route.query.id
      }).then((res) => {
        this.finishedInfo = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.detail {
  position: relative;
}
.export{
  position: absolute;
  right:25px;
  top:18px;
}
.el-form-item {
  margin-bottom: 16px;
}
.table-title {
  padding: 0px 5px;
  height: 22px;
  line-height: 22px;
  margin: 3px 0px;
  border-left: 3px solid rgb(64, 158, 255);
  margin-bottom: 10px;
}
</style>
